<template>
  <span class="support-ico" :class="iconCls"></span>
</template>

<script>
  export default {
    name:"support-ico",
    props: {
      size: { // 图片尺寸
        type:Number,
      },
      type: { // 活动类型
        type: Number
      }
    },
    computed: {
      /**
       * 图标类名，根据类名显示不同图片
       */
      iconCls() {
        // 此处要明确 不同的类型对应的活动是什么，每个活动对应哪个图标，所以顺序一定要正确
        // decrease -> 满减 ; discount -> 折扣; special -> 特价；invoice -> 发票；guarantee -> 外卖保

        const classMap = ['decrease','discount','special','invoice','guarantee'];
        return `icon-${this.size} ${classMap[this.type]}`;
      }
    }
  }
</script>

<style lang="stylus" scoped>
@import '~common/stylus/mixin'
// @import 'common/stylus/variable'

.support-ico
  display inline-block
  background-repeat no-repeat

.icon-1
  width 12px
  height 12px
  background-size 12px 12px
  &.decrease
    bg-image("images/decrease_1")
  &.discount
    bg-image("images/discount_1")
  &.special
    bg-image("images/special_1")
  &.invoice
    bg-image("images/invoice_1")
  &.guarantee
    bg-image("images/guarantee_1")

.icon-2
  width 16px
  height 16px
  background-size 16px 16px
  &.decrease
    bg-image("images/decrease_2")
  &.discount
    bg-image("images/discount_2")
  &.special
    bg-image("images/special_2")
  &.invoice
    bg-image("images/invoice_2")
  &.guarantee
    bg-image("images/guarantee_2")

.icon-3
  width 12px
  height 12px
  background-size 12px 12px
  &.decrease
    bg-image("images/decrease_3")
  &.discount
    bg-image("images/discount_3")
  &.special
    bg-image("images/special_3")
  &.invoice
    bg-image("images/invoice_3")
  &.guarantee
    bg-image("images/guarantee_3")

.icon-4
  width 16px
  height 16px
  background-size 16px 16px
  &.decrease
    bg-image("images/decrease_4")
  &.discount
    bg-image("images/discount_4")
  &.special
    bg-image("images/special_4")
  &.invoice
    bg-image("images/invoice_4")
  &.guarantee
    bg-image("images/guarantee_4")
</style>
